<template>
	<view class="container">
		<view class="header">
			<text class="title">支付房租</text>
		</view>

		<view class="pay-options">
			<picker mode="selector" :range="payOptionLabels" @change="onPayTypeChange">
				<view class="picker">
					<text>选择支付方式：{{ selectedPayOption.label }}</text>
				</view>
			</picker>
		</view>

		<view class="amount-display">
			<text>支付金额：¥{{ amount }}</text>
		</view>

		<button class="pay-btn" @click="handlePay">确定支付</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			monthlyRent: 0, // 月租金
			payOptions: [
				{ label: '月付', value: 'month', multiplier: 1 },
				{ label: '季付', value: 'quarter', multiplier: 3 },
				{ label: '半年付', value: 'halfYear', multiplier: 6 }
			],
			selectedPayOption: { label: '月付', value: 'month', multiplier: 1 }
		}
	},
	onLoad(options) {
		this.monthlyRent = Number(options.rentAmount) || 2500;
	},
	computed: {
		amount() {
			return this.monthlyRent * this.selectedPayOption.multiplier;
		},
		payOptionLabels() {
			return this.payOptions.map(option => option.label);
		}
	},
	methods: {
		onPayTypeChange(e) {
			const index = e.detail.value;
			this.selectedPayOption = this.payOptions[index];
		},
		handlePay() {
			// 模拟支付成功
			uni.showToast({
				title: `支付成功（模拟）：¥${this.amount}`,
				icon: 'success'
			});

			// 更新房间状态
			const today = new Date();
			const dueDate = new Date(today);
			dueDate.setMonth(today.getMonth() + this.selectedPayOption.multiplier);

			// 将更新后的数据传递回上一页
			const updatedData = {
				roomStatus: '在租',
				dueDate: dueDate.toISOString().split('T')[0],
				lastPaymentDate: today.toISOString().split('T')[0]
			};

			// 使用 uni.$emit 传递数据
			uni.$emit('updateRoomData', updatedData);

			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		}
	}
}
</script>

<style>
.container {
	padding: 40rpx;
}

.header {
	margin-bottom: 40rpx;
}

.title {
	font-size: 44rpx;
	font-weight: 500;
	color: #333;
	text-align: center;
}

.pay-options {
	background: #fff;
	border-radius: 16rpx;
	padding: 40rpx;
	margin-bottom: 40rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.picker {
	padding: 20rpx;
	background: #f8f9fa;
	border-radius: 8rpx;
	text-align: center;
	font-size: 32rpx;
	color: #333;
}

.amount-display {
	text-align: center;
	font-size: 36rpx;
	color: #e64340;
	font-weight: 500;
	margin-bottom: 40rpx;
}

.pay-btn {
	width: 100%;
	background-color: #07c160;
	color: #fff;
	font-size: 34rpx;
	padding: 30rpx 0;
	border-radius: 8rpx;
	border: none;
}

.pay-btn:active {
	background-color: #06ad56;
	transform: scale(0.98);
}
</style> 